<template>
  <div app-container>

    <el-row type="flex" justify="center">
      <el-col :span="20">
        <div align="center" style="background-color: lightgray;height: 60px;">
          <div>
            <span id="mainTitle">借款审核</span>
          </div>

        </div>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-description class="con" :column="3" border>
          <p class="title">审核状态</p>
          <el-divider></el-divider>
        </el-description>
        <el-col :span="20">
          <span>贷款编号: <span>{{auditStatus.loanNum}}</span></span>
          <span style="position: absolute;right:700px;">当前进度:
            <span style="color:coral;">{{this.progressStatus}}</span>
          </span>
        </el-col>
        <el-col :span="20">
          <!-- auditStatus.auditor.userName -->
          <p>操作员: <span>{{auditStatus.auditor.userName}}</span></p>
        </el-col>
        <el-col :span="20">
          <p>风控审核意见: <span>{{auditStatus.riskAuditorAdvice}}</span></p>
        </el-col>
      </el-col>
    </el-row>



    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-description class="con" :column="3" border>
          <p class="title">审核结果</p>
          <el-divider></el-divider>
        </el-description>
        <br />
        <el-col :span="20">
          <span>贷款编号: <span>{{auditStatus.loanNum}}</span></span>
          <span style="position: absolute;left:500px;">授信额度: <span>{{auditStatus.loanAmount}}</span></span>
          <span style="position: absolute;left:900px;">授信期限: <span>{{auditStatus.periods}}</span></span>
        </el-col>
        <br />
        <br />
        <el-col :span="20">
          <span>还款方式: <span>{{this.queryPaymentStatus}}</span></span>
          <span style="position: absolute;left:500px;">借款利率: <span>{{auditStatus.monthlyRate*100+'%'}}</span></span>
          <span style="position: absolute;left:900px;">结清违约金率:
            <span>{{(auditStatus.remainUnpaidRatio*100).toFixed(2)+'%'}}</span></span>
        </el-col>
        <br />
        <br />
        <el-col :span="20">
          <span>罚息率: <span>{{(auditStatus.delayPaybackRatio*100).toFixed(2)+'%'}}</span></span>
          <span style="position: absolute;left:500px;">手续费支付方式: <span>{{this.queryServeChangeMethod}}</span></span>
          <span style="position: absolute;left:900px;">资金方: <span>{{auditStatus.channelName}}</span></span>
        </el-col>
        <br />
        <el-col :span="20">
          <p>贷后管理建议: <span>{{auditStatus.afterManageAdvice}}</span></p>
        </el-col>
        <el-col :span="20">
          <p>审核意见: <span>{{auditStatus.auditorAdivice}}</span></p>
        </el-col>
        
      </el-col>
    </el-row>


    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div v-for="(one, index) in allData" :key="index" :model="activeNames" @change="handleChange">
          <el-descriptions :title="one.title" name="1" class="con" :column="3" v-if="one.title !== '车辆信息' && one.title !== '房产信息'&& one.title !== '借款信息'&& one.title !== '申请信息'">
            <template slot="title">
              <p class="title">{{ one.title }}</p>
            </template>
            <el-descriptions-item v-for="(oneone, index1) in one.viewDetails" :key="index1" :label="oneone.fieldName"
              label-class-name="my-label">
              <div v-if="oneone.fieldType != 'pictrue'">
                <span>{{oneone.value}}</span>
              </div>
              <div v-else-if="oneone.fieldType == 'pictrue'">
                <el-image style="width: 160px; height: 90px"
                  :src="require('@/views/production/collaborativeProduct/1561390725417.jpeg')" />
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <hr v-if="one.title !== '车辆信息' && one.title !== '房产信息'&& one.title !== '借款信息'&& one.title !== '申请信息'"></hr>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-description class="con" :column="3" border>
          <p class="title">
            历史进件</p>
          <el-divider></el-divider>
        </el-description>
        <el-col :span="20">
          <span>该身份证号的历史进件</span>
        </el-col>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <el-table v-loading="loading" :data="historyList">
          <el-table-column label="申请日期" align="center" prop="applicantTime" />
          <el-table-column label="姓名" align="center" prop="clientName" />
          <el-table-column label="手机号" align="center" prop="phoneNum" />
          <el-table-column label="审核状态" align="center" prop="creditStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.loan_info_audit_result"
                :value="scope.row.creditStatus" />
            </template>
          </el-table-column>
          <el-table-column label="授信额度(元)" align="center" prop="loanAmount" />
          <el-table-column label="放款订单状态" align="center" prop="applicantStatus">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.loan_info_applicant_status"
                :value="scope.row.applicantStatus" />
            </template>
          </el-table-column>
          <el-table-column label="还款进度" align="center" prop="billPaymentStatus" >
            <template slot-scope="scope">
                  <p v-if="scope.row.billPaymentStatus == 0">
                    已结清
                  </p>
                  <p v-else-if="scope.row.billPaymentStatus == 1">
                    还款中
                  </p>
                </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row :gutter="24" class="mb8" justify="center" type="flex">
      <el-col :span="20">
        <div style="margin-right: 50px; ">
          <el-button type="primary" icon="el-icon-success" size="mini" @click="handlePayment">放款审批</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 放款审批具体信息的弹出框 -->
    <el-dialog title="审批贷款" :visible.sync="auditDialogStatus" width="1000px" append-to-body>
      <el-form ref="finalTrialForm" :model="finalTrialForm" label-width="80px">
        <el-row>
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="审核结果" prop="channelName">
              <el-select v-model="formLoanStatus" placeholder="请选择" clearable style="width: 240px; margin-left: 30px;">
                <!-- 字典状态，dict.type.你添加进字典的类型 -->
                <el-option v-for="dict in dict.type.loan_info_applicant_status" v-if="dict.value>=9 && dict.value<12"
                  :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="授信额度" prop="deptId">
              <el-input :disabled="true" :value="finalTrialForm.loanAmount" maxlength="80" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px; margin-left: 30px;">
            <el-form-item label="授信期限" prop="companyName">
              <el-input :disabled="true" v-model="finalTrialForm.periods" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="还款方式" prop="deptId">
              <el-input :disabled="true" v-model="queryPaymentStatus" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px; margin-left: 30px;">
            <el-form-item label="借款利率" prop="companyName">
              <el-input :disabled="true" :value="(finalTrialForm.monthlyRate*100).toFixed(2)+'%'" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="罚息率" prop="deptId">
              <el-input :disabled="true" :value="(finalTrialForm.delayPaybackRatio*100).toFixed(2)+'%'" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px; margin-left: 30px;">
            <el-form-item label="结清违约金率" prop="companyName">
              <el-input :disabled="true" :value="(finalTrialForm.remainUnpaidRatio*100).toFixed(2)+'%'" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <el-col :span="11" style="height: 42px;">
            <el-form-item label="手续费支付方式" prop="deptId">
              <el-input :disabled="true" v-model="queryServeChangeMethod" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
          <el-col :span="11" style="height: 42px; margin-left: 30px;">
            <el-form-item label="资金方" prop="companyName">
              <el-input :disabled="true" v-model="finalTrialForm.channelName" maxlength="30" width="360px"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <el-col :span="22">
            <el-form-item label="贷后管理建议" prop="deptId">
              <el-input v-model="submitParams.afterManageAdvice" placeholder="请输入" maxlength="30" width="100%"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="margin-top: 10px;">
          <el-col :span="22">
            <el-form-item label="审批意见" prop="deptId">
              <el-input v-model="submitParams.auditIdea" placeholder="请输入" maxlength="30" width="100%"
                style="margin-left: 30px;" />
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="updateFinalTrialForm">确定</el-button>
        <el-button @click="cancelFinalTrialForm">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>

import { viewDetails, newViewDetails, getDetailInfo, getApplicantStatus, getHistoryList, updateFinalTrialOrder } from '../../../../api/finalTrial';
import Dict from "../../../system/dict/index.vue";
import DictTag from "../../../../components/DictTag/index.vue";
export default {
  dicts: ['loan_info_applicant_status', 'loan_info_payment_method', 'loan_info_applicant_status','loan_info_audit_result'],
  components: { Dict, DictTag },
  data() {
    return {
      allData: [
        {
          title: '个人信息',
          data: [],
          name: 123,

        }
      ],
      historyList: [],
      auditStatus: {
      },
      backUserName: '',
      loading: false,
      progressStatus: '',
      queryPaymentStatus: '',
      queryServeChangeMethod: '',
      formLoanStatus: undefined,
      auditDialogStatus: false,
      finalTrialForm: {},
      advices: {
        afterManageAdvice: '',
        auditIdea: ''
      },
      submitParams: {
        applicantStatus: 0,
        afterManageAdvice: '',
        auditIdea: '',
        loanNum: 0
      },
      activeNames: ['1'],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        clientId: undefined,

      }

    }
  },
  created() {
    const clientId = this.$route.params.clientId;
    if (clientId) {
      this.queryParams.clientId = clientId;
      this.getList();
    }
  },
  // mounted(){
  //   this.getList();
  // },
  watch: {
    auditStatus(newVal) {
      getApplicantStatus("loan_info_applicant_status", newVal.progress).then(res => {
        this.progressStatus = res.data;
      }).catch();
      getApplicantStatus("loan_info_payment_method", newVal.paymentStatus).then(res => {
        this.queryPaymentStatus = res.data;
      }).catch();
      getApplicantStatus("loan_info_serve_change_method", newVal.serveChangeMethod).then(res => {
        this.queryServeChangeMethod = res.data;
      }).catch();
      this.backUserName = newVal.auditor.userName;
    },
    formLoanStatus(newVal) {
      this.submitParams.applicantStatus = newVal;

      this.submitParams.loanNum = this.auditStatus.loanNum;
    }
  },
  methods: {
    getList() {
      viewDetails(this.queryParams.clientId).then(res => {
        // console.log("字段数据", res)
        this.allData = res.data
      }).catch();


      getDetailInfo(this.queryParams.clientId).then(res => {
        console.log("详情数据", res)
        for (let item in res.data) {
          if (res.data[item].progress == 6) {
            this.auditStatus = res.data[item];
            break;
          }
        }
        console.log("auditStatus", this.auditStatus)
      }).catch();

      getHistoryList(this.queryParams.clientId).then(res => {
        console.log("历史数据", res)
        this.historyList = res.data;
      }).catch();
    },
    handleChange(val) {
      console.log(val)
      console.log(this.allData)
    },
    handlePayment() {
      this.auditDialogStatus = true;
      this.finalTrialForm = this.auditStatus;
    },
    goBack() {
      this.$router.go(-1)// 返回上一个页面
      //关闭子页面
      this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
      this.$router.push(this.$store.state.tagsView.visitedViews[this.$store.state.tagsView.visitedViews.length - 1].path)
    },
    updateFinalTrialForm() {
      updateFinalTrialOrder(this.submitParams).then(res => {
        if (res.code == 200) {
          this.$notify({
            message: res.msg,
            type: 'success'
          });
          this.getList()
        } else {
          this.$notify.error({
            message: res.msg,
          });
          this.getList()
        }
      }).catch();
      this.auditDialogStatus = false;
      this.goBack();
    },
    cancelFinalTrialForm() {
      this.auditDialogStatus = false;
    },

  }
}
</script>
<style>
body>.el-container {
  margin-bottom: 40px;
  display: inline-block;
}

#mainTitle {
  font-size: 40px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  float: left;

}

/* 调整整个名字和输入框占的盒子大小 */
#context {
  /* float: left; */
  /* width: 20%;  */
  /* margin-left: 50px; */
}

/* .long {
    width: 1050px;
    /* margin-left: 50px; */
/* }  */

/* .short {
    /* float: left; */
/* width: 450px; */
/* margin-left: 50px; */
/* }  */

.title {
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #021717
}

.con {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bolder;
  color: #303133;
}
</style>
  